<script setup>
    import { ref } from "vue";
    import { articleGetAllService, articleSearchService } from "@/api/article";

    const articleList = ref([]);

    const getAllService = async function () {
        let data = await articleGetAllService();
        console.log(data)
        articleList.value = data.data;
    };

    getAllService();

    const searchConditions = ref({
        category: '',
        state: ''
    })

    const search = async function () {
        let data = await articleSearchService({ ...searchConditions.value });
        articleList.value = data.data;
    }
</script>

<template>
    <div>
        文章分类： <input type="text" v-model="searchConditions.category" />

        发布状态： <input type="text" v-model="searchConditions.state" />

        <button @click="search">搜索</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="article in articleList" :key="article.id">
                <td>{{ article.title }}</td>
                <td>{{ article.category }}</td>
                <td>{{ article.time }}</td>
                <td>{{ article.state }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

</template>